<template>
  <div class="footer-view">
    <div class="foot-link-box flex-view">
      <a href="/index/feedback" class="foot-link" target="_blank">留言反馈</a>
      <div class="link-split"></div>
      <a href="/admin" class="foot-link" target="_blank">后台管理</a>
      <div class="link-split"></div>
      <a class="foot-link" @click="handleSource">关于我们</a>
    </div>
    <div class="address">2024-2025 © 新闻管理系统 · All Rights Reserved</div>
  </div>
</template>

<script>
  import { Modal } from 'ant-design-vue';

  export default {
    name: 'Footer',
    data() {
      return {};
    },
    methods: {
      handleSource() {
        Modal.info({
          title: '关于我们',
          content: `
📰 新闻管理系统  
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📋 系统介绍 ━━━━━━━━

这是一个基于Spring Boot + Vue.js开发的现代化新闻管理系统，采用前后端分离架构，为用户提供优质的新闻阅读和管理体验。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✨ 系统特色 ━━━━━━━━
• 简洁美观的用户界面，响应式设计适配各种设备
• 完整的新闻管理功能，支持新闻发布、编辑、分类管理
• 丰富的用户交互功能，包括评论、点赞、收藏等
• 完善的用户权限管理，支持普通用户和管理员角色
• 实时数据统计，帮助管理员了解系统使用情况
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🔧 核心功能 ━━━━━━━━
• 新闻浏览：支持分类浏览、搜索、推荐等功能
• 用户系统：注册、登录、个人信息管理
• 互动功能：评论发表、点赞收藏、用户反馈
• 后台管理：新闻管理、用户管理、分类管理、通知公告
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

⚙️ 技术架构 ━━━━━━━━
• 后端：Spring Boot + MyBatis Plus + MySQL
• 前端：Vue.js + Ant Design Vue + Axios
• 部署：支持Docker容器化部署
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

💡 开发理念 ━━━━━━━━
开发团队致力于为用户提供稳定、高效、易用的新闻管理平台。
          `,
          onOk() {},
        });
      },
    },
  };
</script>

<style scoped lang="less">
  .flex-view {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .footer-view {
    max-width: 1108px;
    margin: 0 auto;
    padding: 24px 0 24px;

    .foot-link-box {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      overflow: hidden;
      margin: 24px auto 24px;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      .foot-link {
        margin: 0 16px;
        color: #2a4f88;
      }
      a {
        background-color: transparent;
        text-decoration: none;
        color: var(--mid-blue);
      }
    }

    .footer-infos {
      height: 16px;
      line-height: 16px;
      font-size: 12px;
      padding-left: 63px;
      color: #aeaeae;
      margin-top: 16px;
      text-align: center;
    }
    .address {
      text-align: center;
      height: 16px;
      line-height: 16px;
      font-size: 12px;
      color: #aeaeae;
      margin-top: 8px;
    }
  }
</style>
